<template>
  <f7-page>
    <f7-navbar title="开关" back-link></f7-navbar>

    <div class="tien-form-group margin-top">
      <div class="title">开关</div>

      <label class="tien-switch square-text">
        <input type="checkbox" checked>
        <i class="icon"></i>
        <span class="text" text-on="是" text-off="否"></span>
      </label>

    </div>
    <div class="tien-form-group">
      <div class="title">定义颜色</div>
      <label class="tien-switch square-text red">
        <input type="checkbox" checked>
        <i class="icon"></i>
        <span class="text" text-on="是" text-off="否"></span>
      </label>
    </div>

    <div class="tien-form-group">
      <div class="title">方形开关</div>
      <label class="tien-switch square square-text green">
        <input type="checkbox" checked>
        <i class="icon"></i>
        <span class="text" text-on="是" text-off="否"></span>
      </label>
    </div>

    <div class="tien-form-group">
      <div class="title">性别</div>
      <label class="tien-switch square square-text green">
        <input type="checkbox" checked>
        <i class="icon"></i>
        <span class="text" text-on="男" text-off="女"></span>
      </label>
    </div>

  </f7-page>
</template>

<script>
import "../../css/colorui/icon/icon.css";
import "../../css/colorui/form.css";
import "../../css/colorui/switch.css";
export default {
  name: "switch",
  data() {
    return {};
  },
  mounted() {},
  methods: {}
};
</script>

